<template>
  <div class="svg-icon-wrapper" :class="`icon-${name}`">
    <component v-if="iconComponent" :is="iconComponent" :fill="fill" :width="width" :height="height" />
  </div>
</template>

<script setup>
// 自动导入 assets/svg 下所有 svg 文件
const modules = import.meta.glob('~/assets/svg/*.svg', { eager: true })

// 生成 icons 对象，key 为文件名（不含扩展名）
const icons = {}
for (const path in modules) {
  // 兼容 win/unix 路径，取出文件名（如 apps.svg -> apps）
  const match = path.match(/([\\/])([^\\/]+)\.svg$/)
  if (match) {
    const key = match[2]
    icons[key] = modules[path].default || modules[path]
  }
}

const props = defineProps({
  name: { type: String, required: true },
  fill: { type: String, default: 'var(--primary-color)' },
  width: { type: String, default: '24' },
  height: { type: String, default: '24' }
})
const iconComponent = computed(() => icons[props.name] || null)
</script>

<style scoped>
.svg-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>